﻿@model LessonModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_ColumnsOne";
    pagebuilder.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : $"{Model.CourseName} - {Model.Name}");
    pagebuilder.AddMetaDescriptionParts(Model.MetaDescription);
    pagebuilder.AddMetaKeywordParts(Model.MetaKeywords);
}

<div class="page category-page">
    <b-button variant="outline-info" class="mt-3" href="@Url.RouteUrl("Course", new { SeName = Model.CourseSeName })">@T("Course.GoBack"): @Model.CourseName</b-button>
    @await Component.InvokeAsync("Widget", new { widgetZone = "courselessondetails_top", additionalData = Model.Id })
    <div class="mt-3">
        <div class="container d-inline-flex px-0">
            <b-card no-body
                    tag="article"
                    class="mb-2">
                <template v-slot:header>
                    <div class="d-inline-flex justify-content-end align-items-center w-100">
                        @if (Model.Approved)
                        {
                            <div class="custom-control custom-checkbox my-1 mr-sm-2">
                                <input type="checkbox" class="custom-control-input" id="customControlInline" checked disabled>
                                <label class="custom-control-label" for="customControlInline"></label>
                            </div>
                        }
                        else
                        {
                            <div class="custom-control disabled custom-checkbox my-1 mr-sm-2">
                                <input type="checkbox" class="custom-control-input" id="customControlInline" disabled>
                                <label class="custom-control-label" for="customControlInline"></label>
                            </div>
                            <button class="btn btn-info" id="btnApprove">@T("Course.ApproveLesson")</button>
                            <script asp-location="Footer">

                                document.getElementById("btnApprove").addEventListener('click',function (event) {
                                    if (confirm('@T("Admin.Common.AreYouSure")')) {
                                        axios({
                                            url: '@Url.Action("Approved", "Course", new { Id = Model.Id })',
                                            method: 'post',
                                        }).then(function (response) {
                                            if (response) {
                                                document.getElementById('btnApprove').style.display = 'none';
                                                document.getElementById('customControlInline').checked = true;
                                            }
                                        })
                                    }
                                 });

                            </script>
                        }
                    </div>
                </template>
                <b-card-img-lazy src="@Model.PictureUrl"></b-card-img-lazy>
                <b-card-body>
                    <h2 class="d-flex flex-column">@Model.Name<span class="h6">(@Model.CourseLevel)</span></h2>
                    @if (Model.DownloadFile)
                    {
                        <a class="btn btn-secondary" id="btnDownloadFile" href="@Url.Action("DownloadFile", "Course", new { id = Model.Id  })">@T("Course.DownloadLesson")</a>
                    }
                    @if (!String.IsNullOrWhiteSpace(Model.ShortDescription))
                    {
                        <p>
                            @Html.Raw(Model.ShortDescription)
                        </p>
                    }
                </b-card-body>
            </b-card>
        </div>
    </div>
    @if (Model.VideoFile)
    {
        <div>
            <video controls controlsList="nodownload">
                <source src="@Url.Action("VideoFile", "Course", new { id = Model.Id  })" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    }
    <b-card class="description mt-3">
        @Html.Raw(Model.Description)
    </b-card>
    @await Component.InvokeAsync("Widget", new { widgetZone = "courselessondetails_bottom", additionalData = Model.Id })
</div>
